/**
 * Created by karl.zheng on 2018/4/10.
 */
import React from 'react'
import {changePass} from '../../../config/requires'
require('./index.css')

class ChangePass extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            oldpass: "",
            pass1: "",
            pass2: ""
        };
        this.onChange = this.onChange.bind(this);
        this.changePass = this.changePass.bind(this);
    }

    onChange(e){
        switch (e.target.id){
            case "oldpass":
                var pass = e.target.value;
                this.setState({
                    oldpass: pass
                });
                break;
            case "pass1":
                var pass = e.target.value;
                this.setState({
                    pass1: pass
                });
                break;
            case "pass2":
                var pass = e.target.value;
                this.setState({
                    pass2: pass
                });
                break;
            default:
                break;
        }
    }

    changePass(){
        if(this.state.pass1!=this.state.pass2){
            alert("the new password must be the same")
        }else{
            var password = this.state.pass1;
            changePass(password).then((res) => {
                console.log(res);
            });
        }
    }

    render(){
        return (
            <div className="change-pass">
                <div className="item-pass">
                    <div className="ui_setting"></div>
                    <input id="oldpass" type="password" placeholder="Please enter your current password" onChange={(e) =>this.onChange(e)}/>
                </div>
                <div className="item-pass">
                    <div className="ui_password"></div>
                    <input id="pass1" type="password" placeholder="Please enter your new password(6-20)" onChange={(e) =>this.onChange(e)}/>
                </div>
                <div className="item-pass">
                    <div className="ui_password"></div>
                    <input id="pass2" type="password" placeholder="Please enter your new password" onChange={(e) =>this.onChange(e)}/>
                </div>

                <button className="btn-change" onClick={this.changePass}>Change password</button>
            </div>
        );
    }
}

export default ChangePass